<!--
Copyright 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<link rel="import" href="ct-builder-failure-card.html">
<link rel="import" href="ct-failure-card-buttons.html">
<link rel="import" href="ct-master-failure-card.html">
<link rel="import" href="ct-step-failure-card.html">

<polymer-element name="ct-failure-stream" attributes="groups commitLog category caption" noscript>
  <template>
    <style>
      :host {
        display: block;
        word-wrap: break-word;
      }

      .bugs {
        margin-bottom: 10px;
        min-height: 24px;
      }

      .card {
        padding: 10px 5px 0;
        border-bottom: 1px solid lightgrey;
        display: flex;
      }

      .card > * {
        flex: 1;
        min-width: 120px;
      }

      .card > ct-failure-card-buttons {
        flex: 0 1 auto;
        margin-right: 10px;
        margin-bottom: 10px;
      }

      /* FIXME: Don't use before hax to add labels */
      :host > div:first-of-type::before {
        content: "{{ caption }}:";
        display: block;
        font-weight: bold;
        font-size: 18px;
        padding: 5px;
        background-color: #f5f5f5;
        margin-bottom: 5px;
      }

      .snoozed {
        opacity: 0.5;
      }

      @media (max-width: 1200px) {
        .card > ct-failure-card-buttons {
          margin-right: 0px;
        }

        .card {
          flex-direction: column;
        }
      }
    </style>
    <template repeat="{{ group in groups }}">
      <template if="{{ group.category == category && group.data.category != 'trooper'  }}">
        <div> <!-- FIXME: Remove when we have a better title solution. -->
          <div class="card">
            <ct-failure-card-buttons group="{{ group }}" bug="{{ bug }}"></ct-failure-card-buttons>
            <div>
              <template if="{{ group.bug }}">
                <div class="bugs">
                  <span style="font-weight: bold">Bugs:</span>
                  <a href="{{ group.bug }}">{{ group.bugLabel }}</a>
                </div>
              </template>
              <template if="{{ group.data.category == 'step' }}">
                <ct-step-failure-card class='{{ { snoozed: group.isSnoozed } | tokenList }}' group="{{ group.data }}" commitLog="{{ commitLog }}"></ct-step-failure-card>
              </template>
              <template if="{{ group.data.category == 'master' }}">
                <ct-master-failure-card class='{{ { snoozed: group.isSnoozed } | tokenList }}' group="{{ group.data }}"></ct-master-failure-card>
              </template>
              <template if="{{ group.data.category == 'builder' }}">
                <ct-builder-failure-card class='{{ { snoozed: group.isSnoozed } | tokenList }}' group="{{ group.data }}"></ct-builder-failure-card>
              </template>
            </div>
          </div>
        </div>
      </template>
    </template>
  </template>
</polymer-element>
